<template>
  <tbody>
    <tr v-for="item in goodList" :key="item.name">
      <td>
        <input v-model="item.checked" type="checkbox" />
      </td>
      <td>
        {{ item.name }}
      </td>
      <td>
        {{ item.price }}
      </td>
      <td>
        <button @click="subCount(item.name)">-</button>
        {{ item.num }}
        <button @click="addCount(item.name)">+</button>
      </td>
      <td>
        {{ item.price * item.num }}
      </td>
      <td>
        <button @click="onDel(item.name)">删除</button>
      </td>
    </tr>
  </tbody>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  // components: { MySub, MyAdd },
  data () {
    return {}
  },

  created () {},
  computed: {
    ...mapState(['goodList'])
    // ...mapGetters(['isAll'])
  },
  methods: {
    ...mapMutations(['del', 'addNum', 'subNum']),
    onDel (name) {
      const index = this.goodList.findIndex((item) => item.name === name)
      this.del(index)
    },
    addCount (name) {
      const index = this.goodList.findIndex((item) => item.name === name)
      this.addNum(index)
    },
    subCount (name) {
      const index = this.goodList.findIndex((item) => item.name === name)
      this.subNum(index)
    }
  }
}
</script>

<style scoped lang="less"></style>
